<template>
	<view>
		<block v-for="item,index in goodsList" :key="index">
			<!-- 为 my-goods 组件动态绑定 goods 属性的值 -->
			<my-goods :goods="item" @click="goDetail"></my-goods>
		</block>
	</view>
</template>

<script>
	/**
	 * 1.下拉刷新
			1.1 在配置文件中开启下拉刷新
					在pages.json页面的配置对象中将 enablePuLLDownRefresh 设置为true
			1.2 在页面中监听页面下拉事件
					在页面的js中，跟生命周期同级位置声明 onPuLLDownRefresh 函数
			1.3	在刷新完成后关闭下拉刷新效果 uni.stopPullDownRefresh()
		2.上拉加载
		3.点击跳转
	 */
	export default {
		data() {
			return {
				// 请求参数对象
				params: {
					query: '',
					cid:'',
					pagenum: 1,
					pagesize: 10
				},
				total: 0, // 总条数
				goodsList: [], // 商品列表
				isLoading: false // 节流阀
			}
		},
		onLoad(options) {
			// onLoad的形参就是跳转页面传递的参数，如果当前时tabBar页面则无法接收参数
			console.log(options)
			this.params.query = options.query || ''
			this.params.cid = options.cat_id || ''
			this.getGoodsList()
		},
		// 下拉刷新的事件
		onPullDownRefresh() {
			this.params.pagenum = 1
			this.goodsList = []
			this.getGoodsList(uni.stopPullDownRefresh)
		},
		// 上拉触底
		onReachBottom() {
			// 判断当前数据是否已经是全部数据
			if(this.params.pagenum * this.params.pagesize >= this.total){
				return uni.$showMsg('到底啦~')
			}
			// 如果是在请求过程中，就不允许翻页 - 节流
			if(this.isLoading) return
			// 让页面加1
			this.params.pagenum++
			this.getGoodsList()
		},
		methods: {
			// 跳转到商品详情页
			goDetail(goods) {
				// console.log(goods)
				uni.navigateTo({
					url: '/subpkg/goods-detail/goods-detail?goods_id='+goods.goods_id
				})
			},
			// 获取商品列表
			async getGoodsList(fn) {
				this.isLoading = true
				const {data: {message, meta}} = await uni.$http.get('/api/public/v1/goods/search', this.params)
				this.isLoading  = false
				// 判断是不是在下拉刷新是调用，如果是则，关闭
				fn && fn()
				
				if(meta.status !== 200) return uni.$showMsg()
				// this.goodsList = message.goods
				this.goodsList = [...this.goodsList, ...message.goods]
				this.total = message.total
			}
		}
	}
</script>

<style lang="scss">

</style>
